<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>筛选 · 1</title>
    <link rel="stylesheet" href="../common/public.css" />
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>

    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant.js -->
    <script src="../common/ui/vant-ui/ui.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <!-- 顶部 -->
          <top close="true" title="筛选 · 1"></top>
          <div class="pd20">
            <!-- 滑块表单 -->
            <div v-for="(i,index) in sliderList">
              <div class="fs18 mgt20">
                <span class="fwb">{{ i.title }}</span>
                <span class="noLimit">({{ i.msg }})</span>
              </div>
              <div class="mgt20 pd20">
                <div class="flex jcsb" v-if="index==0">
                  <span class="cg">{{ i.list[i.value[0]] }}</span>
                  <span class="cg">{{ i.list[i.value[1]] }}</span>
                </div>
                <div class="flex jcsb" v-if="index==1">
                  <span class="cg">{{ i.value[0] }}年</span>
                  <span class="cg">{{ i.value[1] }}年</span>
                </div>
                <div class="flex jcsb" v-if="index==2">
                  <span class="cg">{{ i.value[0] }}K</span>
                  <span class="cg">{{ i.value[1] }}K</span>
                </div>
                <van-slider
                  v-model="i.value"
                  range
                  :min="1"
                  :max="i.max"
                  class="mgt20"
                >
                  <template #button>
                    <div class="sliderBall">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                  </template>
                </van-slider>
              </div>
            </div>

            <!-- 选择表单 -->
            <div>
              <div class="fs18 mgt20">
                <span class="fwb">{{ qzState.title }}</span>
                <span class="noLimit">({{ qzState.msg }})</span>
              </div>
              <div class="flex fww mgt20">
                <div class="" v-for="(j,index) in qzState.list">
                  <div
                    class="tag"
                    :class="qzState.value==index?'tagActive':''"
                    @click="qzState.value = index"
                  >
                    {{ j }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 滑块表单 -->
            <div>
              <div class="fs18 mgt20">
                <span class="fwb">{{ age.title }}</span>
                <span class="noLimit">({{ age.msg }})</span>
              </div>
              <div class="mgt20 pd20">
                <div class="flex jcsb">
                  <span class="cg">{{ age.value[0] }}岁</span>
                  <span class="cg">{{ age.value[1] }}岁</span>
                </div>
                <van-slider
                  v-model="age.value"
                  range
                  :min="18"
                  :max="age.max"
                  class="mgt20"
                >
                  <template #button>
                    <div class="sliderBall">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                  </template>
                </van-slider>
              </div>
            </div>

            <!-- 选择表单 -->
            <div v-for="i in tag">
              <div class="fs18 mgt20">
                <span class="fwb">{{ i.title }}</span>
                <span class="noLimit">({{ i.msg }})</span>
              </div>
              <div class="flex fww mgt20">
                <div class="" v-for="(j,index) in i.list">
                  <div
                    class="tag"
                    :class="i.value==index?'tagActive':''"
                    @click="i.value = index"
                  >
                    {{ j }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 按钮 -->
            <div class="mgt40 flex">
              <van-button class="exitBtn mgr20">清除</van-button>
              <van-button class="f1 curBtn">确认</van-button>
            </div>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  .fs30 {
    font-size: 30px;
  }
  .cg {
    color: rgb(9, 204, 52);
  }
  .noLimit {
    color: #999;
    font-size: 12px;
  }
  .tagActive {
    border: 1px solid green;
    color: green;
    background-color: #fff;
  }
  .curBtn {
    margin-left: 20px;
    background-color: var(--primary-color);
    color: #fff;
  }
  .exitBtn {
    background-color: #fff;
    color: #000;
    width: 100px;
  }
  .sliderBall {
    width: 30px;
    height: 30px;
    border-radius: 50px;
    padding: 10px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.5);
    box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
  }
  .sliderBall span {
    height: 10px;
    border: 1px solid var(--primary-color);
    margin: 3px;
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app", // 指定 Vue 实例的挂载点
    data: {
      sliderList: [
        {
          title: "学历要求",
          msg: "不限",
          value: [1, 5],
          max: 5,
          list: ["", "初中及以下", "高中", "大专", "本科", "硕士", "博士"],
        },
        {
          title: "工作经验",
          msg: "3年-5年",
          value: [1, 10],
          max: 10,
        },
        {
          title: "期望薪资",
          msg: "不限",
          value: [1, 200],
          max: 200,
        },
      ],
      qzState: {
        title: "求职状态",
        msg: "全部",
        list: [
          "不限",
          "离职-随时到岗",
          "在职-暂不考虑",
          "在职-考虑机会",
          "在职-月内到岗",
        ],
        value: 0,
      },
      age: {
        title: "年龄要求",
        msg: "不限",
        value: [16, 60],
        max: 60,
      },
      tag: [
        {
          title: "院校要求",
          msg: "不限",
          list: [
            "不限",
            "统招本科",
            "双一流院校",
            "211院校",
            "985院校",
            "留学生",
          ],
          value: 0,
        },
        {
          title: "性别",
          msg: "不限",
          list: ["不限", "男", "女"],
          value: 0,
        },
        {
          title: "跳槽频率",
          msg: "不限",
          list: ["不限", "5年少于3份", "时间>1年"],
          value: 0,
        },
        {
          title: "牛人职位要求",
          msg: "不限",
          list: ["不限", "仅从事过此职业", "最近从事此职业", "牛人期望此职业"],
          value: 0,
        },
        {
          title: "是否和同事交换简历",
          msg: "不限",
          list: ["不限", "近一个月没有"],
          value: 0,
        },
        {
          title: "近期没看过",
          msg: "不限",
          list: ["不限", "近14天没有"],
          value: 0,
        },
      ],
    },
    components: {
      top: httpVueLoader("../common/commpent/top.vue"),
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {
      ck(index, chooes) {
        console.log(index, chooes);
        // j.value = index
      },
    },
  });
</script>
